<form [nzLayout]="'inline'" nz-form class="ant-advanced-search-form">
  <div nz-row>
      <nz-form-item>
        <nz-form-label>{{l('start_end_time')}}</nz-form-label>
        <nz-form-control>
          <nz-input-group>
            <nz-range-picker [(ngModel)]="theTime" nzShowTime [ngModelOptions]="{standalone: true}"></nz-range-picker>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>{{l('site_name')}}</nz-form-label>
        <nz-form-control>
          <nz-select name="select-1" [(ngModel)]="siteId" [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="l('please_select_site')">
            <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
            <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="control-area">
        <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
        <button nz-button (click)="reset()">{{l('reset')}}</button>
        <button nz-button (click)="exportToExcel()">{{l('export')}}</button>
      </nz-form-item>
  </div>
  <div nz-row>
      <nz-form-item>
        <nz-form-label>{{l('filter')}}</nz-form-label>
        <nz-form-control>
          <nz-radio-group [(ngModel)]="filterVal" [ngModelOptions]="{standalone: true}">
            <label nz-radio [nzValue]="o.value" *ngFor="let o of filterList">{{o.label}}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>{{l('sort')}}</nz-form-label>
        <nz-form-control>
          <nz-radio-group [(ngModel)]="sortStr" [ngModelOptions]="{standalone: true}">
            <label nz-radio [nzValue]="o.value" *ngFor="let o of sortList">{{o.label}}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
</form>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1000px'}" [nzData]="tableHelper.items" [nzLoading]="tableHelper.loading"
  (nzPageSizeChange)="load()" [nzShowTotal]="totalTemplate">
  <thead>
    <tr>
      <th nzWidth="100px" nzLeft="0px">{{l('serial_number')}}</th>
      <!-- <th>{{l('lockset_no')}}</th> -->
      <th>{{l('site_name')}}</th>
      <th>{{filterStr}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td>{{i++1}}</td>
      <!-- <td>{{data.lockCode}}</td> -->
      <td>{{data.siteName}}</td>
      <td>{{data.bus}}</td>

    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>
